<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="多店销售报表" @clickLeft="back" />


		<uni-forms :modelValue="baseFormData" ref="form" style="margin-left: 10px;" >
			<!-- <uni-forms-item label="连锁店:" style="margin-top: 15px;">
				<uni-data-select style="width: 75%;  margin-left: -10px; " v-model="baseFormData.chainStore"
					 placeholder="所有连锁店" :localdata="store"></uni-data-select>
			</uni-forms-item> -->
			
			<uni-forms-item label="连锁店:" style="margin-top: 15px; width: 70%;" name="chainStore">
					<uni-combox style="width: 95%;  margin-left: -10px;"  :candidates="candidates" placeholder="所有连锁店" v-model="chain"  @input="getHandle(chain)"></uni-combox>
			</uni-forms-item>
			<button type="warn" size="mini" @click="clearInput" style="position: relative; left: 80%; top: -55px; ">清空</button>
			<uni-forms-item label="日期:" style="margin-top: -40px;" label-width="60" >
				<!-- <view size="small" class="example-body" style="width: 80%;  margin-left: 5px; ">
					<uni-datetime-picker v-model="baseFormData.documentTime" type="daterange" @maskClick="maskClick" />
				</view> -->
				<view class="example-body" style="width: 35%;">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.startTime"  />
				</view>						
				<uni-text style="position: absolute; left: 38%; top: 15rpx;">至</uni-text>
				<view class="example-body" style="width: 35%; position: absolute; left: 45%; top: 0px;">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.endTime"  />
				</view>
			</uni-forms-item>

			<view>
				<button size="mini" type="primary" style="top:-15px;" @click="submit">查询报表</button>
			</view>

		</uni-forms>


		<view  style="position: relative; top: -10px;">
			<uni-table ref="table" border stripe>
				
				<uni-tr>
					<uni-th width="30" align="center"></uni-th>
					<uni-th width="150" align="center" class="positioning">连锁店</uni-th>
					<uni-th width="70" align="center">净售量</uni-th>
					<uni-th width="100" align="center">净售额</uni-th>
					<uni-th width="100" align="center">千禧净售额</uni-th>
					<uni-th width="100" align="center">现金等</uni-th>
					<uni-th width="100" align="center">预存消费</uni-th>
					<uni-th width="100" align="center">总售成本</uni-th>
					<uni-th width="100" align="center">净利润</uni-th>
				</uni-tr>
				<uni-tr v-show="isFifteen">
					<uni-td align="center"></uni-td>
					<uni-td align="center">合计</uni-td>
					<uni-td align="center" class="positioning">{{netSales}}</uni-td>
					<uni-td align="center">{{netAmount}}</uni-td>
					<uni-td align="center">{{qxNetAmount}} ({{percentage}})</uni-td>
					<uni-td align="center">{{cashAmount}}</uni-td>
					<uni-td align="center">{{chainPrepaidAmount}}</uni-td>
					<uni-td align="center">{{totalCost}}</uni-td>
					<uni-td align="center">{{netSalesProfit}}</uni-td>
					
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center" class="positioning">{{ item.chainName }}</uni-td>
					<uni-td align="center">{{ item.netSales }}</uni-td>
					<uni-td align="center">{{ item.netAmount }}</uni-td>
					<uni-td align="center">{{ item.qxNetAmount }} ({{item.percentage}})</uni-td>
					<uni-td align="center">{{ item.cashAmount }}</uni-td>
					<uni-td align="center">{{item.chainPrepaidAmount}}</uni-td>
					<uni-td align="center">{{item.totalCost}}</uni-td>
					<uni-td align="center">{{item.netSalesProfit}}</uni-td>
				</uni-tr>
				<uni-tr v-show="isShow">
					<uni-td align="center"></uni-td>
					<uni-td align="center" class="positioning">合计</uni-td>
					<uni-td align="center">{{netSales}}</uni-td>
					<uni-td align="center">{{netAmount}}</uni-td>
					<uni-td align="center">{{qxNetAmount}} ({{percentage}})</uni-td>
					<uni-td align="center">{{cashAmount}}</uni-td>
					<uni-td align="center">{{chainPrepaidAmount}}</uni-td>
					<uni-td align="center">{{totalCost}}</uni-td>
					<uni-td align="center">{{netSalesProfit}}</uni-td>
					
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from 'libs/util/global'
	import getdateTime from '@/common/getdateTime.js'
	export default {
		data() {
			return {
				candidates: [],
				chain: '',
				// 表单数据
				baseFormData: {
					chainStore: '',
					startTime: '',
					endTime: ''					
				},
				isAdmin: null,
				isFifteen: false, // 隐藏表单
				isShow: false, // 显示表格
				store: [], // 连锁店下拉框
				handler: [], // 经手人下拉框
				searchValue: '123123',
				searchVal: '',
				chainId: '',
				tableData: {},
				AdminTableDate: [],
				userId: '',
				isdministrators: false,
				// 表单校验
				
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				userType: '',
				loginUserId: null,
				loginUserType: null,
				authority: null,
				netSales: 0,// 净售量
				netAmount: '',// 净售额
				qxNetAmount: 0,// 货品净数量
				percentage: '', //千禧占比
				cashAmount: 0, //现金,
				chainPrepaidAmount: 0, //预存消费
				totalCost: 0,//总售成本
				netSalesProfit: 0 // 净利润
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					// console.log(res.data + "登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					// console.log(res.data + "登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					console.log("登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
			// 获取当天时间
			var timeStr = getdateTime.dateTimeStr('y-m-d')
			this.baseFormData.startTime = timeStr
			this.baseFormData.endTime = timeStr
		},
	
		mounted() {
			this.getStorage()
		},
		methods: {
			clearInput(){
				this.chain = ""
				this.baseFormData.chainStore = null
			},
			getHandle(chain){
				console.log("查看chain:"+chain)				
				if(chain == ""){
					this.baseFormData.chainStore = null
				}else{
					console.log("进入判断")
					for (var i = 0; i < this.store.length; i++) {
						if(this.store[i].text === chain){
							console.log(this.store[i].value)
							this.baseFormData.chainStore = this.store[i].value
						}
					}
				}
			},

			// 获取连锁店下拉框
			getStorage() {
				// 连锁店自营者 自己所拥有的店铺
				let url =
					baseUrl+'/chain/store/' + this.loginUserId + "/" + this.loginUserType
				uni.request({
					url: url,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {},
					success: (res) => {
						this.store = res.data.data 
						for (var i = 0; i < this.store.length; i++) {
							this.candidates.push(this.store[i].text) 
						}	
					}
				})							
			},

			maskClick(e) {
				// console.log('maskClick事件 单据日期下拉框:', e);
			},
			//提交表单数据
			submit() {
				this.tableData = null
				this.isFifteen = false
				this.isShow = false
				this.netSales = 0			
				this.netAmount = 0
				this.qxNetAmount = 0
				this.cashAmount = 0
				this.chainPrepaidAmount = 0
				this.totalCost = 0
				this.netSalesProfit = 0
				// console.log("多连锁店报表-->提交表单-->用户权限：" + this.authority)
					uni.showLoading({
						title: '加载中.....'
					})
				// 判断时间
				let time = new Date()
				var startTime = new Date(this.baseFormData.startTime);
				var endTime = new Date(this.baseFormData.endTime);
				var timeDiff = endTime.getTime() - startTime.getTime() ;

				var dateDiff = timeDiff/(24 * 3600 * 1000) - 180;
					console.log("存在")
					if (this.authority == 0) { // 管理员或者是总部督导
							// console.log("进入总部查询")
							// 判断连锁店名称合法性
							if(this.candidates.indexOf(this.chain,0) >= 0 || this.chain === ''){
								uni.request({
									url: baseUrl+'/chain/headQuartersOrders',
									header: {
										'content-type': 'application/json'
									},
									method: 'POST',
									data: {
										startTime: this.baseFormData.startTime,
										endTime: this.baseFormData.endTime,
										chainStore: this.baseFormData.chainStore
									},
									success: (res) => {
													
										setTimeout(
											function() {
												uni.hideLoading();
											}, 100);
										console.log(res)								
										if (res.data.data != null) {
											this.tableData = res.data.data
											if(res.data.data.length >= 15){
												this.isFifteen = true
											}
											if(res.data.data.length >0 ){
												this.isShow = true
											}
											for (var i = 0; i < res.data.data.length; i++) {						
												this.netSales = Number(this.netSales) + Number(res.data.data[i].netSales)
												this.netAmount = Number(this.netAmount) + Number(res.data.data[i].netAmount)
												this.qxNetAmount = Number(this.qxNetAmount) + Number(res.data.data[i].qxNetAmount)						
												this.cashAmount = Number(this.cashAmount) + Number(res.data.data[i].cashAmount)
												this.chainPrepaidAmount = Number(this.chainPrepaidAmount) + Number(res.data.data[i].chainPrepaidAmount)								
												this.totalCost = Number(this.totalCost) + Number(res.data.data[i].totalCost)
												this.netSalesProfit = Number(this.netSalesProfit) + Number(res.data.data[i].netSalesProfit)						
											}
											this.percentage = Number(this.qxNetAmount / this.netAmount).toFixed(2) * 100 +"%"								
										} else {
											uni.showToast({
												title: '该时间段没有销售报表记录！',
												icon: 'none',
												duration: 500
											});
											this.tableData = null
										}
									}
								})
							}else{
								console.log("不存在")
								uni.showToast({
								title: '请输入正确的连锁店名称!',
								icon: 'none',
								duration: 500
									});
									this.tableData = null
							}
							
					
						} else if (this.authority == 1) { // 连锁店自营者
						// 判断当前时间和提交的时间范围 在白天9点到晚上22点查询数据
					
						//console.log("---- getHour ----" + time.getHours() + "," + dateDiff);
						if(time.getHours() >= 9 && time.getHours() <= 22){
							// 9:00 到 22：00 只能查询6个月内数据						
							if(dateDiff < 0){
								 console.log("这里是允许通过的时间范围内")
								 // 判断连锁店名称合法性
								 if(this.candidates.indexOf(this.chain,0) >= 0 || this.chain === ''){
								uni.request({
									url: baseUrl+'/chain/operatorAll',
									header: {
										'content-type': 'application/json'
									},
									method: 'POST',
									data: {
										startTime: this.baseFormData.startTime,
										endTime: this.baseFormData.endTime,
										chainStore: this.baseFormData.chainStore,
										chainUsreId: this.loginUserId
									},
									success: (res) => {
										
										setTimeout(
											function() {
												uni.hideLoading();
											}, 100);
										console.log(res)								
										if (res.data.data != null) {
											this.tableData = res.data.data
											if(res.data.data.length >= 15){
												this.isFifteen = true
											}
											if(res.data.data.length >0 ){
												this.isShow = true
											}
											for (var i = 0; i < res.data.data.length; i++) {	
												this.netSales = Number(this.netSales) + Number(res.data.data[i].netSales)
												this.netAmount = Number(this.netAmount) + Number(res.data.data[i].netAmount)
												this.qxNetAmount = Number(this.qxNetAmount) + Number(res.data.data[i].qxNetAmount)						
												this.cashAmount = Number(this.cashAmount) + Number(res.data.data[i].cashAmount)
												this.chainPrepaidAmount = Number(this.chainPrepaidAmount) + Number(res.data.data[i].chainPrepaidAmount)								
												this.totalCost = Number(this.totalCost) + Number(res.data.data[i].totalCost)
												this.netSalesProfit = Number(this.netSalesProfit) + Number(res.data.data[i].netSalesProfit)							
											}
											this.percentage = Number(this.qxNetAmount / this.netAmount  * 100 ).toFixed(0) +"%"	
					
											// this.percentage = 0								
										} else {
											uni.showToast({
												title: '该时间段没有数据！',
												icon: 'none',
												duration: 1000
											});
										}
									}
								})
								}else{
									console.log("不存在")
									uni.showToast({
									title: '请输入正确的连锁店名称!',
									icon: 'none',
									duration: 500
										});
										this.tableData = null
								}
							}else{
								uni.showToast({
								title: '9:00 - 22:00 只能能查最近6个月内数据',
								icon: 'none',
								duration: 1000
									});
							}
						}else{
							// 判断连锁店名称合法性
							if(this.candidates.indexOf(this.chain,0) >= 0 || this.chain === ''){
							
							//  不限制时间段						
							uni.request({
								url: baseUrl+'/chain/operatorAll',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									startTime: this.baseFormData.startTime,
									endTime: this.baseFormData.endTime,
									chainStore: this.baseFormData.chainStore,
									chainUsreId: this.loginUserId
								},
								success: (res) => {
									
									setTimeout(
										function() {
											uni.hideLoading();
										}, 100);
									// console.log(res)								
									if (res.data.data != null) {
										this.tableData = res.data.data
										if(res.data.data.length >= 15){
											this.isFifteen = true
										}
										if(res.data.data.length >0 ){
											this.isShow = true
										}
										for (var i = 0; i < res.data.data.length; i++) {	
											this.netSales = Number(this.netSales) + Number(res.data.data[i].netSales)
											this.netAmount = Number(this.netAmount) + Number(res.data.data[i].netAmount)
											this.qxNetAmount = Number(this.qxNetAmount) + Number(res.data.data[i].qxNetAmount)						
											this.cashAmount = Number(this.cashAmount) + Number(res.data.data[i].cashAmount)
											this.chainPrepaidAmount = Number(this.chainPrepaidAmount) + Number(res.data.data[i].chainPrepaidAmount)								
											this.totalCost = Number(this.totalCost) + Number(res.data.data[i].totalCost)
											this.netSalesProfit = Number(this.netSalesProfit) + Number(res.data.data[i].netSalesProfit)							
										}
										this.percentage = Number(this.qxNetAmount / this.netAmount).toFixed(0) * 100 +"%"									
									} else {
										uni.showToast({
											title: '该时间段没有数据！',
											icon: 'none',
											duration: 1000
										});
									}
								}
							})
							}else{
								console.log("不存在")
								uni.showToast({
								title: '请输入正确的连锁店名称!',
								icon: 'none',
								duration: 500
									});
									this.tableData = null
							}
						}
						
							
						}else { //  如果是店员或者别的角色 只查询当前店铺		
						uni.showToast({
							title: '您没有权限查看！',
							icon: 'none',
							duration: 500
						});
					}
				
				
				



			},
			// 左上角返回按钮
			back() {
				uni.switchTab({
					url: '/pages/work/work'
				})
			}

		}

	}
</script>

<style>
	.uni-group {
		display: flex;
		align-items: center;
	}

	//冻结表头第一列
 	/deep/ .uni-table-tr .uni-table-td:nth-child(2){
		position: sticky;
		left: 0;
		top: 0;
		background-color: lavenderblush;
		z-index: 1;
	} 
	//冻结表头第一列
	/deep/ .uni-table-tr {	
		overflow: visible;
		background-color: #fff;
	}

	/deep/ .uni-table-tr .uni-table-th:nth-child(2){
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 1;
	}

</style>